<template>
  <el-timeline>
    <el-timeline-item
      v-for="(item, index) in flowRecordList"
      :key="index"
      :icon="setIcon(item.finishTime)"
      :color="setColor(item.finishTime)"
    >
      <p style="font-weight: 700">{{ item.taskName }}</p>
      <el-card :body-style="{ padding: '10px' }">
        <el-descriptions class="margin-top" :column="1" size="small" border>
          <el-descriptions-item
            v-if="item.assigneeName"
            label-class-name="my-label"
          >
            <template slot="label"><i class="el-icon-user"></i>办理人</template>
            {{ item.assigneeName }}
            <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            v-if="item.candidate"
            label-class-name="my-label"
          >
            <template slot="label"
              ><i class="el-icon-user"></i>候选办理</template
            >
            {{ item.candidate }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-label">
            <template slot="label"
              ><i class="el-icon-date"></i>接收时间</template
            >
            {{ item.createTime }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="item.finishTime"
            label-class-name="my-label"
          >
            <template slot="label"
              ><i class="el-icon-date"></i>处理时间</template
            >
            {{ item.finishTime }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="item.duration"
            label-class-name="my-label"
          >
            <template slot="label"><i class="el-icon-time"></i>耗时</template>
            {{ item.duration }}
          </el-descriptions-item>
          <el-descriptions-item v-if="item.comment" label-class-name="my-label">
            <template slot="label"
              ><i class="el-icon-tickets"></i>处理意见</template
            >
            {{ item.comment.comment }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import { getFlowRecordList } from "@/api/flowable/workflow";
export default {
  name: "FlowRecordList",
  props: {
    bizId: {
      type: String,
      default: null,
    },
    bizType: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      procInsId: "17",
      deployId: "13",
      flowRecordList: [],
    };
  },
  mounted() {
    console.log("bizId", this.bizId);
    console.log("bizType", this.bizType);
    this.getFlowRecordList();
  },
  methods: {
    getFlowRecordList() {
      const that = this;
      const params = { bizId: this.bizId, bizType: this.bizType };
      getFlowRecordList(params).then((res) => {
        that.flowRecordList = res.data.flowList;
      });
    },
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
  },
};
</script>

<style scoped>
.flow-record-list {
  padding: 20px;
}
</style>
